<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common/head.jsp" %>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">

        <div class="container-fluid am-cf">
            <div class="row">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                    <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 部件首页
                        <small>Amaze UI</small>
                    </div>
                    <p class="page-header-description">Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件，更有多个包含不同主题的 Web 组件。</p>
                </div>
                <div class="am-u-lg-3 tpl-index-settings-button">
                    <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置
                    </button>
                </div>
            </div>

        </div>

        <div class="row-content am-cf">
            <div class="row  am-cf">
                <c:forEach var="operat" items="${operatingSystem}">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget widget-primary am-cf">
                            <div class="widget-statistic-header">
                                    ${operat.key}
                            </div>
                            <div class="widget-statistic-body">
                                <div class="widget-statistic-value">
                                        ${operat.value}
                </div>
                                <div class="widget-statistic-description">
                                    占比<strong><fmt:formatNumber type="percent"
                                                                maxFractionDigits="2"
                                                                value="${operat.value/operatingSystemTotal}"/></strong>
                </div>
                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
            </div>
                        </div>
                    </div>
                </c:forEach>
            </div>
            <div class="row  am-cf">
                <c:forEach var="brow" items="${browser}">
                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget widget-purple am-cf">
                            <div class="widget-statistic-header">
                                    ${brow.key}
                            </div>
                            <div class="widget-statistic-body">
                                <div class="widget-statistic-value">
                                        ${brow.value}
                                </div>
                                <div class="widget-statistic-description">
                                    占比<strong><fmt:formatNumber type="percent"
                                                                maxFractionDigits="2"
                                                                value="${brow.value/browserTotal}"/></strong>
                                </div>
                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>
                            </div>
                        </div>
                    </div>
                </c:forEach>

            </div>
            <div class="row am-cf">
                <div class="am-u-sm-12 am-u-md-8">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">最近一周访问量统计</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body-md widget-body tpl-amendment-echarts am-fr" id="tpl-echarts">

                        </div>
                        <input type="hidden" name="weekPV" value="${weekPV}">
                    </div>
                </div>

                <div class="am-u-sm-12 am-u-md-4">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">专用服务器负载</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body widget-body-md am-fr">

                            <div class="am-progress-title">CPU Load <span class="am-fr am-progress-title-more"
                                                                          id="combinedSpan">${combined} / 100%</span>
                            </div>
                            <div class="am-progress">
                                <div class="am-progress-bar" style="width: ${combined}" id="combinedDiv"></div>
                            </div>
                            <div class="am-progress-title">MEM Load <span class="am-fr am-progress-title-more"
                                                                          id="usedPercentSpan">${usedPercent}/ 100%</span>
                            </div>
                            <div class="am-progress">
                                <div class="am-progress-bar  am-progress-bar-warning" style="width: ${usedPercent}"
                                     id="usedPercentDiv"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>


            <div class="row am-cf">
                <div class="am-u-sm-12 am-u-md-12 am-u-lg-4 widget-margin-bottom-lg ">
                    <div class="tpl-user-card am-text-center widget-body-lg">
                        <div class="tpl-user-card-title">
                            禁言小张
                        </div>
                        <div class="achievement-subheading">
                            月度最佳员工
                        </div>
                        <img class="achievement-image" src="/resources/image/user07.png" alt="">
                        <div class="achievement-description">
                            禁言小张在
                            <strong>30天内</strong> 禁言了
                            <strong>200多</strong>人。
                        </div>
                    </div>
                </div>

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-8 widget-margin-bottom-lg">

                    <div class="widget am-cf widget-body-lg">

                        <div class="widget-body  am-fr">
                            <div class="am-scrollable-horizontal ">
                                <table width="100%" class="am-table am-table-compact am-text-nowrap tpl-table-black "
                                       id="example-r">
                                    <thead>
                                    <tr>
                                        <th>文章标题</th>
                                        <th>作者</th>
                                        <th>时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr class="gradeX">
                                        <td>新加坡大数据初创公司 Latize 获 150 万美元风险融资</td>
                                        <td>张鹏飞</td>
                                        <td>2016-09-26</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;">
                                                    <i class="am-icon-pencil"></i> 编辑
                                                </a>
                                                <a href="javascript:;" class="tpl-table-black-operation-del">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="even gradeC">
                                        <td>自拍的“政治角色”：观众背对希拉里自拍合影表示“支持”</td>
                                        <td>天纵之人</td>
                                        <td>2016-09-26</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;">
                                                    <i class="am-icon-pencil"></i> 编辑
                                                </a>
                                                <a href="javascript:;" class="tpl-table-black-operation-del">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="gradeX">
                                        <td>关于创新管理，我想和你当面聊聊。</td>
                                        <td>王宽师</td>
                                        <td>2016-09-26</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;">
                                                    <i class="am-icon-pencil"></i> 编辑
                                                </a>
                                                <a href="javascript:;" class="tpl-table-black-operation-del">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="even gradeC">
                                        <td>究竟是趋势带动投资，还是投资引领趋势？</td>
                                        <td>着迷</td>
                                        <td>2016-09-26</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;">
                                                    <i class="am-icon-pencil"></i> 编辑
                                                </a>
                                                <a href="javascript:;" class="tpl-table-black-operation-del">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="even gradeC">
                                        <td>Docker领域再添一员，网易云发布“蜂巢”，加入云计算之争</td>
                                        <td>醉里挑灯看键</td>
                                        <td>2016-09-26</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;">
                                                    <i class="am-icon-pencil"></i> 编辑
                                                </a>
                                                <a href="javascript:;" class="tpl-table-black-operation-del">
                                                    <i class="am-icon-trash"></i> 删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr>


                                    <!-- more data -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
<script>
    if (typeof(EventSource) !== "undefined") {
        var source = new EventSource("sigar");
        source.onmessage = function (event) {
            var json = JSON.parse(event.data);
            $('#combinedSpan').text(json.combined + '/ 100%');
            $('#combinedDiv').css('width', json.combined);
            $('#usedPercentSpan').text(json.usedPercent + '/ 100%');
            $('#usedPercentDiv').css('width', json.usedPercent);
        };
    }
    else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
    }
            // ==========================
            // 百度图表A http://echarts.baidu.com/
            // ==========================
            Date.prototype.Format = function (fmt) { //author: meizz
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            };
            var echartsA = echarts.init(document.getElementById('tpl-echarts'));
            var weekPV = $('input[name="weekPV"]').val();
            var json = JSON.parse(weekPV);
            var now = new Date();
            var xAxisData = [];
            for (i = 0; i < 7; i++) {
                now.setDate(now.getDate() - 1);
                xAxisData.push(now.Format('yyyy-MM-dd'));
            }
            xAxisData.reverse();
            option = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    top: '3%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: false,
                    data: xAxisData
                }],
                yAxis: [{
                    type: 'value'
                }],
                textStyle: {
                    color: '#838FA1'
                },
                series: [{
                    name: '访问量',
                    type: 'line',
                    stack: '次数',
                    areaStyle: {normal: {}},
                    data: json,
                    itemStyle: {
                        normal: {
                            color: '#1cabdb',
                            borderColor: '#1cabdb',
                            borderWidth: '2',
                            borderType: 'solid',
                            opacity: '1'
                        },
                        emphasis: {}
                    }
                }]
            };

            echartsA.setOption(option);

</script>
<%@ include file="../common/foot.jsp" %>
